<template>
  <div class="mod-user">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
     <el-date-picker
        v-model="dataForm.selectDate"
        type="daterange"
        value-format="yyyyMMdd"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getDataList"
        class="mod-picker"
        >
      </el-date-picker>
      <el-select v-model="dataForm.marketId" placeholder="所属贷超">
        <el-option  value="">请选择</el-option>
        <el-option v-for="market in marketList" :key="market.id" :value="market.id" :label="market.name">
          {{ market.name }}
        </el-option>
      </el-select>
      <el-form-item>
        <el-button  @click="getDataList()">查询</el-button>
      </el-form-item>
      <div v-loading="dataListLoading">
       <div v-if="dataList.length>0">
        <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        :header-cell-style="tableHeaderColor"
        style="width:100%;">
        <el-table-column
                prop="date"
                header-align="center"
                align="center"
                width="150"
                fixed="left"
                label="日期">
          </el-table-column>
          <el-table-column
                header-align="center"
                align="center"
                width="150"
                fixed="left"
                label="访问总和">
                <template slot-scope="scope">
                  <div>详情总和:{{scope.row.detailSum}}</div>
                  <div>申请总和:{{scope.row.applySum}}</div>
                </template>
          </el-table-column>
          
          <el-table-column 
          v-for="(item,index) in tableHead" :key="index" :label="item.productName"
          eader-align="center" align="center" width="120">
          <template slot-scope="scope">
          <div>{{scope.row.list[index].detailCount}}</div>
          <div>{{scope.row.list[index].applyCount}}</div>
          </template>
          </el-table-column>
        </el-table>
        </div>
        <div v-else>暂无数据</div>
      </div>
      
      

    </el-form>
</div>
</template>

<script>
  export default {
    data () {
      return {
        dataListLoading:false,
        tableHead:[],
        dataList: [],
        dataForm: {
          selectDate: '',
          marketId: ''
        },
        marketList: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        }
      }
    },
    activated () {
     this.dataForm.selectDate = [this.getDateNow(6),this.getDateNow(0)]
     this.dataForm.marketId = ''
     this.getDataList();
    },
    created () {
        this.$http({
        url: this.$http.adornUrl('/api/market/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.marketList = data && data.code === 0 ? data.list : []
      })
    },
    methods: {
      getDateNow(timeOff){
        var mDate = new Date(new Date().getTime()-timeOff*24*60*60*1000);
        var year = mDate.getFullYear();
        var month = mDate.getMonth()+1;
        month = month>= 10? month:'0'+month;
        var day = mDate.getDate();
        day = day>= 10?day:'0'+day;
        return year+month+day;
      },
       getDataList () {
        this.dataListLoading = true;
        this.tableHead=[];
        
        this.$http({
          url: this.$http.adornUrl('/api/stastic/uv'),
          method: 'post',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'startDate':this.dataForm.selectDate == null ? '' : this.dataForm.selectDate[0],
            'endDate': this.dataForm.selectDate == null ? '' : this.dataForm.selectDate[1],
            'marketId': this.dataForm.marketId
          })
        }).then(({data}) => {
         if (data && data.errno === 0) {
            this.dataList=[];
            this.dataList = data.data;
            for (var i = 0; i < this.dataList.length; i++) {
                for(var j=0;j< this.dataList[i].list.length;j++){
                    this.tableHead.push({
                       productName:this.dataList[i].list[j].productName,
                       logo:this.dataList[i].list[j].logo,
                   })
                }
            }
            this.tableHead = this.unique(this.tableHead);
            console.log(this.tableHead);
          } else {
            this.dataList = []
          }         
          this.dataListLoading = false
        })
      },
      unique (arr){
          var hash=[];
          var obj = {};
            for (var i = 0; i < arr.length; i++) {
                if(!obj[arr[i].productName]){
                    hash.push(arr[i]);
                    obj[arr[i].productName] = true;
                }
            }
            return hash;
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'color: #555;font-weight: 500;'
        }
      }
    }
  }
</script>

<style lang="scss">
 .mod-user{
     overflow:auto;
 }
 .mod-picker {
    > .el-range-separator{
      padding:0px 0px !important;
    }
    margin-bottom: 30px;
  }
  .uv-table{
      width:1000px;
      table-layout:fixed;
      border-collapse:collapse;
      border:1px solid #ebeef5;
  }
  .uv-table thead{
    color:#909399;
    font-weight:500;
   
  }
  .uv-table tr{
      background:#fff;
  }
 
  .uv-table thead tr th{
      border-bottom:1px solid #ebeef5;
      border-right:1px solid #ebeef5;
       height:50px;
       width:130px;
  }
  .uv-table tbody{
      text-align:center;
      color:#909399;
  }
  .uv-table tbody tr{
     border-bottom:1px solid #ebeef5;
    
  }
  .uv-table tbody tr td{
      color:#909399;
      height:48px;
      border-right:1px solid #ebeef5;
       border-bottom:1px solid #ebeef5;
      
  }
  
</style>